<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>菜谱详情</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1566355_y0svck5nrv9.css">
    <!-- <link rel="stylesheet" href="http://at.alicdn.com/t/font_1566550_fl55xfspegu.css"> -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2/lib/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        /*整体样式*/
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: #f3f4f8;
            line-height: 1.5;
            font-size: 14px;
            font-family: Hiragino Sans GB W3, microsoft yahei, WenQuanYi Micro Hei, sans-serif;
        }

        .iconfont {
            font-size: 24px;
        }

        /*头部样式*/
        .tophead {
            width: 100%;
            height: 50px;
            /* border: solid 1px red; */
        }

        .tophead h2 {
            text-align: center;
            padding-top: 10px;
            padding-right: 32px;
        }

        .tophead span {
            color: black;
            float: left;
            padding: 8px;
        }

        /*菜品图片样式*/
        .show-picture {
            width: 100%;
            height: 414px;
        }

        .show-picture img {
            width: 100%;
            height: 100%;
        }

        /*菜品名字样式*/
        .food-name h1 {
            padding-left: 15px;
            padding-top: 8px;
        }

        /*菜谱作者样式*/
        .food-writer img {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            margin-left: 15px;
        }

        .food-writer p {
            display: inline;
            padding-left: 10px;
            color: #999;
            font-size: 14px;
            position: absolute;
            top: 518px;
        }

        /*材料样式*/
        .food-material {
            padding: 10px 0 10px 20px;
            font-family: Arial, Helvetica, sans-serif;
        }

        .food-material hr {
            opacity: 0.5;
            margin-bottom: 10px;
        }

        .food-material b {
            color: grey;
            font-size: 14px;
        }

        .food-material span {
            width: 45%;
            font-size: 16px;
            color: black;
            display: inline-block;
            vertical-align: middle;

        }

        .food-material a {
            font-size: 16px;
            color: grey;
            opacity: 0.5;
        }

        /*步骤样式*/
        .step {
            padding: 10px 20px;
        }

        .step-box {
            font-weight: bold;
            font-size: 18px;
            padding-bottom: 10px;
        }

        .step ol li {
            padding-bottom: 10px;
            font-size: 16px;

        }

        .step-picture {
            width: 374px;
            height: 280.5px;
        }

        .step img {
            border-radius: 5px;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="tophead">
        <a href="Menu list.html"> <span class="iconfont icon-back"></span></a>
        <h2>菜谱详情</h2>
    </div>
    <div class="detail-list">
        <!-- <li v-for="it in menuList">
            <a title="it.title" href="food-detail.html">
                <div class="pic">
                    <img class="imgLoad" :src="it.pic" data-src="" width="80" height="80"
                        style="display:block;">
                </div>
                <div class="detail">
                    <h4>{{it.title}}</h4>
                    <p>{{it.detail}}</p>
                    <p class="note">{{it.note}}</p>
                </div>
            </a>
        </li> -->
        <div class="show-picture">
            <img
                src="image/qzxy.jpg">
        </div>
        <div class="content">
            <div class="food-name">
                <h1>清蒸鳗鱼</h1>
            </div>
            <div class="food-writer">
                <img
                    src="https://i5.meishichina.com/data/avatar/000/78/65/03_avatar_big.jpg?x-oss-process=style/c320&v=20191221">
                <p>钱钱de餐桌</p>
            </div>
            <div class="food-material">
                <div class="food-material1">
                    <b>主料</b>
                    <hr>
                    <span>鳗鱼</span>
                    <span>35克</span><a class="iconfont icon-more" href="#"></a>
                    <hr>
                </div>
                <div class="food-material2">
                    <b>辅料</b>
                    <hr>
                    <span>姜片</span>
                    <span>适量</span><a class="iconfont icon-more" href="#"></a>
                    <hr>
                    <span>盐</span>
                    <span>40g</span><a class="iconfont icon-more" href="#"></a>
                    <hr>
                    <span>料酒</span>
                    <span>1个</span><a class="iconfont icon-more" href="#"></a>
                    <hr>
                    <span>鸡精</span>
                    <span>20g</span><a class="iconfont icon-more" href="#"></a>
                    <hr>
                </div>
            </div>
            <div class="step">
                <div class="step-box">
                    <h3>清蒸鳗鱼的做法步骤</h3>
                </div>
                <ol>
                    <li>
                        1 材料：鳗鱼（已清洗）、姜片。
                    </li>
                    <li>2 将已清洗好的鳗鱼中，加入2勺半盐。
                    </li>
                    <li>3 抹匀腌制3个小时以上。
                    </li>
                    <li>4 随后，腌制好的鳗鱼放入大盘中。
                    </li>
                    <li>5 接着，搁入姜片。
                    </li>
                    <li>6 加适量的料酒。
                    </li>
                    <li>7 加适量的鸡精。
                    </li>
                    <li>8 然后，放入蒸锅里。
                    </li>
                    <li>9 盖上盖，上锅蒸至7——8分钟，即成。
                    </li>
                    <li>10 开盖，取出。
                    </li>
                    <li>最后，我们的清蒸鳗鱼就做好啦！！！</li>
                    <li>
                        <div class="step-picture">
                            <img
                                src="image/qzmy.jpg">
                        </div>
                    </li>
                </ol>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.2/lib/vant.min.js"></script>
</body>
<!-- <script>
    var app = new Vue({
        el: ".container",
        data: {
            menuList: []
        },
        methods: {
            Select1: function () {
                //alert("66666");

            }
        }
    });
    var now = Date.now();
    var appKey = SHA1("A6029466653976" + "UZ" + "6C293257-23ED-3634-AD1D-B81D73CD4251" + "UZ" + now) + "." + now

    axios.get('https://d.apicloud.com/mcm/api/foodlist', {
        headers: {
            "X-APICloud-AppId": "A6029466653976",
            "X-APICloud-AppKey": appKey
        }
    })
        .then(function (response) {
            // _this.goodsList = response.data;
            console.log(response.data);
            app.menuList = response.data;
            //alert(JSON.stringify(response.data));
        })
        .catch(function (error) {
            console.log(error);
        });
</script> -->

</html>